<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
   <div id="app">
       <mytmp></mytmp>
   </div>
</body>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"快吃饭"
        },
        //Vue实例对象本身也是一个组件
        //如果vue实例对象中有template，那么template里面的内容会直接将el选择的内容替换掉
        //template:"<h1>aa</h1>"

        //我们自定义的mytmp这个组件相当于是vue父及组件的子组件
        //组件与组件之间都拥有自己独立的作用域
        components:{
            mytmp:{
                //子组件中data必须是一个方法，这与实例组件这个父组件不一样
                data:function () {
                   return {msg:"好的！"}
                },
                template:"<h1>{{msg}}</h1>"
            }
        }
    });
</script>
</html>